// globalTimeFilter.js
document.addEventListener('DOMContentLoaded', function() {
    // 获取头部容器
    const headElement = document.getElementById('head');
    if (!headElement) return;

    // 创建时间筛选器容器
    const timeFilterContainer = document.createElement('div');
    timeFilterContainer.id = 'global-time-filter';
    timeFilterContainer.innerHTML = `
        <div class="time-filter active" data-period="day">本日</div>
        <div class="time-filter" data-period="month">本月</div>
        <div class="time-filter" data-period="year">本年</div>
    `;

    // 添加到头部右上角
    headElement.appendChild(timeFilterContainer);

    // 添加样式
    const style = document.createElement('style');
    style.innerHTML = `
        #global-time-filter {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 15px;
            z-index: 1000;
        }
        
        .time-filter {
            padding: 8px 20px;
            background: rgba(10, 58, 124, 0.5);
            border: 1px solid rgba(36, 187, 236, 0.3);
            color: #a2d3e8;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1.8rem;
            transition: all 0.3s ease;
        }
        
        .time-filter.active {
            background: rgba(36, 187, 236, 0.2);
            color: #24bbec;
            font-weight: bold;
            box-shadow: 0 0 10px rgba(36, 187, 236, 0.5);
        }
        
        .time-filter:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
    `;
    document.head.appendChild(style);

    // 初始化时间筛选器
    initGlobalTimeFilter();
});

// 全局时间筛选器状态
let currentTimePeriod = 'day'; // 默认本日
let currentTimeParam = ''; // 当前时间参数

// 初始化时间筛选器
function initGlobalTimeFilter() {
    const filters = document.querySelectorAll('.time-filter');

    // 设置初始激活状态
    filters.forEach(filter => {
        if (filter.dataset.period === currentTimePeriod) {
            filter.classList.add('active');
        }

        // 添加点击事件
        filter.addEventListener('click', function() {
            // 移除所有激活状态
            filters.forEach(f => f.classList.remove('active'));

            // 设置当前激活
            this.classList.add('active');

            // 更新全局时间范围
            currentTimePeriod = this.dataset.period;

            // 更新当前时间参数
            updateTimeParam();

            // 触发全局时间变化事件
            const event = new CustomEvent('timePeriodChanged', {
                detail: {
                    period: currentTimePeriod,
                    param: currentTimeParam
                }
            });
            document.dispatchEvent(event);
        });
    });

    // 初始更新时间参数
    updateTimeParam();
}

// 更新时间参数
function updateTimeParam() {
    const now = new Date();
    const year = now.getFullYear(); // 获取后两位年份
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');

    switch(currentTimePeriod) {
        case 'year':
            currentTimeParam = year;
            break;
        case 'month':
            currentTimeParam = `${year}-${month}`;
            break;
        case 'day':
            currentTimeParam = `${year}-${month}-${day}`;
            break;
        default:
            currentTimeParam = `${year}-${month}-${day}`;
    }
}

// 获取当前时间参数
function getCurrentTimeParam() {
    return currentTimeParam;
}

// 获取当前时间范围类型
function getCurrentTimePeriod() {
    return currentTimePeriod;
}

// 导出函数供其他组件使用
export { getCurrentTimeParam, getCurrentTimePeriod };
